<template>
	<view>
		<view style="border-left: none; border-right: none; padding-bottom: 0; ">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
				styleType="text"></uni-segmented-control>
			<view v-show="current == 0">
				<view class="datePickBox">
					<uni-datetime-picker type="date" v-model="searchDate" @change="checkDate" :clear-icon="false"
						style="background-color: #e2e2e2;  border-radius: 20rpx;" />
				</view>

				<view class="container">
					<view class="contentBox" :class="index !=0 ? 'contentBoxFirst' :''" v-for="(e,index) in phyList"
						:key="index">
						<view class="topContent">
							<view style="width: 40%;"><text
									style="font-size: 40rpx;color: #0042f4; font-weight: 700; ">{{e.storey}}</text><text
									style="font-size: 28rpx;color: #aaa; margin-left: 10rpx;">（畔湖苑）</text>
							</view>
							<view class="smallBox">
								<view class="font">总人数</view>
								<view class="numBox">{{e.data["总人数"]}}</view>
							</view>
							<view style="width: 1rpx; height: 50rpx; background-color: #aaa;"></view>
							<view class="smallBox">
								<view class="font">在寝</view>
								<view class="numBox">{{e.data["在寝"]}}</view>
							</view>
							<view style="width: 1rpx; height: 50rpx; background-color: #aaa;"></view>
							<view class="smallBox" @click="toAllType(e.storey,5)">
								<view class="font">违纪</view>
								<view class="numBox">{{e.data["违纪（在寝）"]}}</view>
							</view>
						</view>
						<view class="bottomContent">
							<view class="" style="font-size: 24rpx; color: #aaa; width: 40%;">
								<view class="font"></view>
								<view class=""></view>
							</view>
							<view class="smallBox" @click="toAllType(e.storey,4)">
								<view class="font">请假</view>
								<view class="numBox">{{e.data["请假"]}}</view>
							</view>
							<view style="width: 1rpx; height: 50rpx; background-color: #aaa;"></view>
							<view class="smallBox" @click="toAllType(e.storey,6)">
								<view class="font">缺勤</view>
								<view class="numBox" style="color: red;">{{e.data["缺勤"]}}</view>
							</view>
							<view style="width: 1rpx; height: 50rpx; background-color: #aaa;"></view>
							<view class="smallBox" @click="toAllType(e.storey,2)">
								<view class="font">未打卡</view>
								<view class="numBox">{{e.data["未打卡"]}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-show="current == 1">
				<view class="datePickBox">
					<uni-datetime-picker type="date" v-model="searchDate" @change="checkDate" :clear-icon="false"
						style="background-color: #e2e2e2;  border-radius: 20rpx;" />
				</view>
				<view class="container">
					<view class="contentBox" :class="index !=0 ? 'contentBoxFirst' :''" v-for="(e,index) in thyList"
						:key="index">
						<view class="topContent">
							<view style="width: 40%;"><text
									style="font-size: 40rpx;color: #0042f4; font-weight: 700; ">{{e.storey}}</text><text
									style="font-size: 28rpx;color: #aaa; margin-left: 10rpx;">（听湖苑）</text>
							</view>
							<view class="smallBox">
								<view class="font">总人数</view>
								<view class="numBox">{{e.data["总人数"]}}</view>
							</view>
							<view style="width: 1rpx; height: 50rpx; background-color: #aaa;"></view>
							<view class="smallBox">
								<view class="font">在寝</view>
								<view class="numBox">{{e.data["在寝"]}}</view>
							</view>
							<view style="width: 1rpx; height: 50rpx; background-color: #aaa;"></view>
							<view class="smallBox" @click="toAllType(e.storey,5)">
								<view class="font">违纪</view>
								<view class="numBox">{{e.data["违纪（在寝）"]}}</view>
							</view>
						</view>
						<view class="bottomContent">
							<view class="" style="font-size: 24rpx; color: #aaa; width: 40%;">
								<view class="font"></view>
								<view class=""></view>
							</view>
							<view class="smallBox" @click="toAllType(e.storey,4)">
								<view class="font">请假</view>
								<view class="numBox">{{e.data["请假"]}}</view>
							</view>
							<view style="width: 1rpx; height: 50rpx; background-color: #aaa;"></view>
							<view class="smallBox" @click="toAllType(e.storey,6)">
								<view class="font">缺勤</view>
								<view class="numBox" style="color: red;">{{e.data["缺勤"]}}</view>
							</view>
							<view style="width: 1rpx; height: 50rpx; background-color: #aaa;"></view>
							<view class="smallBox">
								<view class="font" @click="toAllType(e.storey,2)">未打卡</view>
								<view class="numBox">{{e.data["未打卡"]}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import statistics from "@/api/modules/statistics.js"
	import {
		parseTime
	} from "@/utils/date.js"
	import teacherclass from "@/api/modules/teachClass.js"
	export default {
		data() {
			return {
				bzrUrl: "/pages/index/supervisorIndex",
				topName: "考勤统计",
				userName: "",
				searchDate: "",
				attendanceList: [],
				current: 0,
				items: ["畔湖苑", "听湖苑"],
				phyList: [],
				thyList: [],
				storeyList: [],
				buildNo: "1",
				storey: "",
				attenceStatus: "",
			}
		},
		methods: {
			toAllType(e, attenceStatus) {
				this.storeyList.forEach(item => {
					if (e == item.dictLabel) {
						this.storey = item.dictValue
					}
				})
				console.log(this.storey)
				console.log(this.buildNo)
				this.attenceStatus = attenceStatus
				console.log(this.attenceStatus)
				uni.navigateTo({
					url: `/pages_main/managementTeacher/allTypeUnStudentList/allTypeUnStudentList?buildNo=${this.buildNo}&storey=${this.storey}&date=${this.searchDate}&attenceStatus=${this.attenceStatus}&current=${this.current}`
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (e.currentIndex == 0) {
					this.buildNo = "1"
				} else if (e.currentIndex == 1) {
					this.buildNo = "5"
				}
				console.log(this.buildNo)
				this.getAttendanceList()
			},
			checkDate(e) {
				console.log(e)
				this.searchDate = e
				this.getAttendanceList()
			},
			getAttendanceList() {
				statistics.getSdAttenceStuCountByBuildStorey({
					date: this.searchDate
				}).then(res => {
					this.attendanceList = res.data
					this.attendanceList.forEach(item => {
						this.$set(item, "total", 0)
						item.buildingNoData.forEach(e => {
							item.total += Number(e.data["总人数"])
						})

					})
					this.attendanceList.forEach(e => {
						if (e.buildingNo == "畔湖苑") {
							this.phyList = e.buildingNoData
						} else if (e.buildingNo == "听湖苑") {
							this.thyList = e.buildingNoData
						}
					})
					console.log(this.phyList)
					console.log(this.thyList)
				})
			},
			getStoreyList() {
				teacherclass.getDictByType("sys_storey").then(res => {
					this.storeyList = res.data
					console.log(this.storeyList)

				})
			},
		},
		onLoad(options) {
			this.userName = uni.getStorageSync("userName")
			this.searchDate = parseTime(Date.now()).slice(0, 10)
			this.getStoreyList()
			if (options.date) {
				this.searchDate = options.date
				this.current = Number(options.current)
			}
			this.getAttendanceList()

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		/* height: 100vh; */
		/* background-color: #fafafa; */
	}

	.chinese-number {
		font-family: "Hiragino Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
		font-size: 28rpx;
	}

	.box {
		border-top: 1rpx solid #ddd;
		padding: 20rpx;
	}

	.steory {
		font-weight: 700;
	}

	.header {
		padding: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.headerLeft {
		color: #0042f4;
	}

	.headerRight {
		display: flex;
		color: #aaa;
	}

	.contentBox {
		background-color: #fff;

		/* text-align: center; */
		border-radius: 20rpx;
	}

	.contentBoxFirst {
		margin-top: 30rpx;
	}

	.topContent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
	}

	.bottomContent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
	}

	.smallBox {
		text-align: center;
		width: 13%;
	}

	.font {
		color: #4f4f4f;
		font-size: 26rpx;
		padding: 10rpx 0;
	}

	page {
		background-color: #f1f1f1;
	}

	.datePickBox {
		padding: 40rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #f1f1f1;
	}

	/deep/.segmented-control[data-v-064e9cd1] {
		height: 60rpx;
	}

	/deep/.segmented-control__item--text[data-v-064e9cd1] {
		padding: 6rpx;
		border-bottom-width: 6rpx;
	}

	.container {
		background-color: #f1f1f1;
	}

	.numBox {
		font-weight: 700;
	}
</style>